<template>
  <div>
    <el-row>
      <el-col>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-select clearable v-model="form.year" placeholder="请选择年份">
                <el-option label="2018年" value="shanghai"></el-option>
                <el-option label="2019年" value="beijing"></el-option>
                <el-option label="2020年" value="beijing"></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select clearable v-model="form.quarter" placeholder="请选择季度">
                <el-option label="一季度" value="shanghai"></el-option>
                <el-option label="二季度" value="beijing"></el-option>
                <el-option label="三季度" value="beijing"></el-option>
                <el-option label="四季度" value="beijing"></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select v-model="form.month" placeholder="请选择月份">
                <el-option label="7月" value="shanghai"></el-option>
                <el-option label="8月" value="beijing"></el-option>
                <el-option label="9月" value="beijing"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <h2 style="text-align: center; margin: 20px 0">学生考勤</h2>
        <ve-bar :data="chartData" :settings="chartSettings"></ve-bar>
      </el-col>
      <el-col :span="12">
        <h2 style="text-align: center; margin: 20px 0">教学考勤</h2>
        <ve-histogram :data="chartData2" :settings="chartSettings2"></ve-histogram>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <h2 style="text-align: center; margin: 20px 0">教室考勤</h2>
        <ve-waterfall :data="chartData3"></ve-waterfall>
      </el-col>
      <el-col :span="12">
        <h2 style="text-align: center; margin: 20px 0">计划外数据</h2>
        <ve-line :data="chartData4"></ve-line>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "TeachingStatements",
    data () {
      this.chartSettings = {
        xAxisType: ['KMB', 'KMB'],
        xAxisName: ['扫描上课', '扫描下课'],
        axisSite: {
          top: ['扫描上课']
        }
      };
      this.chartSettings2 = {
        metrics: ['计划内课时', '实际课时'],
        dimension: ['日期']
      };
      this.chartSettings4 = {
        radius: [10, 100],
        offsetY: 300
      };
      return {
        form: {
          year: "2020年",
          quarter: "三季度",
          month: "8月"
        },
        chartData: {
          columns: ['日期', '扫描上课', '扫描下课'],
          rows: [
            { '日期': '1/1', '扫描上课': 1393, '扫描下课': 1093 },
            { '日期': '1/2', '扫描上课': 3530, '扫描下课': 3230 },
            { '日期': '1/3', '扫描上课': 2923, '扫描下课': 2623 },
            { '日期': '1/4', '扫描上课': 1723, '扫描下课': 1423 },
            { '日期': '1/5', '扫描上课': 3792, '扫描下课': 3492 },
            { '日期': '1/6', '扫描上课': 4593, '扫描下课': 4293 }
          ]
        },
        chartData2: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '计划内课时': 1393, '实际课时': 1093, '下单率': 0.32 },
            { '日期': '1/2', '计划内课时': 3530, '实际课时': 3230, '下单率': 0.26 },
            { '日期': '1/3', '计划内课时': 2923, '实际课时': 2623, '下单率': 0.76 },
            { '日期': '1/4', '计划内课时': 1723, '实际课时': 1423, '下单率': 0.49 },
            { '日期': '1/5', '计划内课时': 3792, '实际课时': 3492, '下单率': 0.323 },
            { '日期': '1/6', '计划内课时': 4593, '实际课时': 4293, '下单率': 0.78 }
          ]
        },
        chartData3: {
          columns: ['活动', '时间'],
          rows: [
            { '活动': '自主实验', '时间': 4 },
            { '活动': '开放实验', '时间': 10 },
            { '活动': '考试', '时间': 15 },
            { '活动': '考证', '时间': 13 },
            { '活动': '社会服务', '时间': 7 }
          ]
        },
        chartData4: {
          columns: ['日期', '实训名称', '地点', '实训项目'],
          rows: [
            { '日期': '1/1', '实训名称': 1393, '地点': 1093, '实训项目': 1232 },
            { '日期': '1/2', '实训名称': 3530, '地点': 3230, '实训项目': 1111 },
            { '日期': '1/3', '实训名称': 2923, '地点': 2623, '实训项目': 1353 },
            { '日期': '1/4', '实训名称': 1723, '地点': 1423, '实训项目': 1675 },
            { '日期': '1/5', '实训名称': 3792, '地点': 3492, '实训项目': 2653 },
            { '日期': '1/6', '实训名称': 4593, '地点': 4293, '实训项目': 2442 }
          ]
        }
      }
    }
  }
</script>

<style scoped>

</style>
